<template>
	<div id="layout" class="full-screen">
		<el-container>
			<el-aside :width="menufold ? '65px' : '200px'">
				<el-menu :collapse-transition="false" :collapse="menufold" style="height:100vh;" :default-active="activeMenu" text-color="#fff" active-text-color="#ffd04b" background-color="#545c64" @open="handleScroll" @close="handleScroll">
					<simplebar style="height:100vh;">
						<sidebaritem v-for="item in routes" :item="item" :wordVisible="!menufold" :key="item.name" />
					</simplebar>
				</el-menu>
			</el-aside>
			<el-container style="height: 100vh;">
				<el-header style="margin:10px;">
					<div style="display: flex;align-items: center;flex-direction: row;justify-content: space-between;">
						<!-- 面包屑 -->
						<div style="display: flex;justify-content: flex-start;align-items: center;">
							<div v-if="foldbuttonshow">
								<i class="el-icon-s-unfold" v-if="menufold" @click="handlefold"></i>
								<i class="el-icon-s-fold" v-else @click="handlefold"></i>
							</div>

							<div style="width:20px"></div>

							<el-breadcrumb separator-class="el-icon-arrow-right" class="hide">
								<el-breadcrumb-item v-for="item in breadcrumb" :key="item.name">{{ item.title
									}}</el-breadcrumb-item>
							</el-breadcrumb>
						</div>

						<!-- 用户名之类的东西 -->
						<div style="height: 28px;" class="hide">

							<div v-if="token != null && token.length > 0" style="display: flex;flex-direction: row;justify-content: flex-end;align-items: baseline;">
								<div style="margin: 5px;">
									{{ "欢迎你，" + userinfo.info.name }}
								</div>
								<el-dropdown size="mini" @command="handleUserDropDown">
									<i class="el-icon-arrow-down el-icon--down"></i>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="logout">登出</el-dropdown-item>
										<el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>

								<el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleDialougeClose">
									<el-form :model="pswdForm" :rules="rules" ref="pswdForm" label-width="100px">
										<el-form-item label="旧密码" prop="oripswd">
											<el-input clearable show-password v-model="pswdForm.oripswd"></el-input>
										</el-form-item>
										<el-form-item label="输入新密码" prop="newpswd">
											<el-input clearable show-password v-model="pswdForm.newpswd"></el-input>
										</el-form-item>
										<el-form-item label="确认新密码" prop="confirmpswd">
											<el-input clearable show-password v-model="pswdForm.confirmpswd"></el-input>
										</el-form-item>
									</el-form>
									<span slot="footer" class="dialog-footer">
										<el-button @click="handleDialougeClose">取 消</el-button>
										<el-button type="primary" @click="handleDialougeConfirm">确 定</el-button>
									</span>
								</el-dialog>
							</div>
							<div v-else><el-button type="info" plain size="mini" @click="handlegotologin">登录</el-button>
							</div>

						</div>
					</div>

					<div style=" display:block;height:1px;width:100%;margin:10px 0;background-color: #DCDFE6;position: relative;">
					</div>
					<!-- 页签 -->
					<simplebar style="width:100vw;" class="tagViewWidth">
						<div style="display: flex;justify-content: flex-start;align-items: center;">

							<tagView :routee=homeTagView />
							<tagView v-for="item in tagView" :key="item.name" :routee="item" />

						</div>
					</simplebar>

					<div style="height: 10px;"></div>
				</el-header>
				<el-main id="layout_main">
					<keep-alive>
						<router-view v-if="$route.meta.keepAlive" />
					</keep-alive>
					<router-view v-if="!$route.meta.keepAlive" />
				</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { updatepassword } from "@/api/user";
import tagView from "./tagView.vue";
import sidebaritem from "./sidebaritem.vue";
import SparkMD5 from "spark-md5";
export default {
	name: "layout",
	components: { sidebaritem, tagView },
	created() {
		this.routes = this.$router.options.routes;
		const index = this.routes.findIndex((item) => {
			return item.name === "app";
		});
		this.routes = this.routes[index].children;
	},
	beforeRouteLeave(to, from, next) {
		// 清除缓存数据的逻辑
		if (!this.tagView.some((item) => item.name == from.name)) {
			this.$destroy(); // 销毁当前组件实例
		}

		next(); // 必须调用next()来结束路由守卫流程
	},
	destroyed() {},
	mounted() {
		this.handleResize();
		window.addEventListener("resize", this.handleResize);
	},
	methods: {
		...mapActions(["exit"]),
		handleResize() {
			if (document.body.clientWidth < 768) {
				this.menufold = true;
				this.foldbuttonshow = false;
			} else {
				this.menufold = false;
				this.foldbuttonshow = true;
			}
		},
		beforeunloadHandler(e) {},
		handlegotologin() {
			this.$router.push("login");
		},
		handleUserDropDown(command) {
			if (command == "logout") {
				this.exit().then((res) => {
					if (res.code == 200) {
						this.$message.success("您已成功退出登录");
					} else {
						this.$message.error("出了一点问题，请联系管理员");
					}
				});
			}
			if (command == "updatePassword") {
				this.dialogVisible = true;
			}
		},
		handlefold() {
			this.menufold = !this.menufold;
		},
		handleScroll() {},
		handleRemove(name) {},
		handleClick(ele) {
			// console.log(ele.name);
		},
		handleDialougeClose() {
			this.dialogVisible = false;
			this.pswdForm.oripswd = "";
			this.pswdForm.newpswd = "";
			this.pswdForm.confirmpswd = "";
		},
		handleDialougeConfirm() {
			this.$refs.pswdForm.validate((valid) => {
				if (valid) {
					if (this.pswdForm.newpswd == this.pswdForm.confirmpswd) {
						this.dialogVisible = false;
						updatepassword({
							oripswd: SparkMD5.hash(this.pswdForm.oripswd),
							newpswd: SparkMD5.hash(this.pswdForm.newpswd),
						}).then((res) => {
							if (res.code == 200) {
								this.handleDialougeClose();
								this.$message.success("密码修改成功");
							} else {
								this.$message.error(res.message);
							}
						});
					} else {
						this.$message.error("两次输入的新密码不匹配");
					}
				}
			});
		},
	},
	computed: {
		calcMenuWidth() {
			this.menuWidth = this.menufold ? 65 : 200;
		},
		cachedViews() {
			// 动态计算需要缓存的页面列表
			return this.$router
				.getRoutes()
				.filter((route) => route.meta && route.meta.keepAlive);
		},

		...mapGetters([
			"breadcrumb",
			"tagView",
			"token",
			"activeTagView",
			"userinfo",
		]),
		activeMenu() {
			return this.activeTagView.name;
		},
	},
	data() {
		return {
			foldbuttonshow: true,
			homeTagView: { fullpath: "/home", name: "home", title: "首页" },
			menuWidth: 0,
			menufold: false,
			routes: [],
			dialogVisible: false,
			pswdForm: { oripswd: "", newpswd: "", confirmpswd: "" },
			rules: {
				oripswd: [
					{ required: true, message: "请输入旧密码", trigger: "blur" },
					{ min: 4, message: "长度大于 4 个字符", trigger: "blur" },
				],
				newpswd: [
					{ required: true, message: "请输入新密码", trigger: "blur" },
					{ min: 4, message: "长度大于 4 个字符", trigger: "blur" },
				],
				confirmpswd: [
					{ required: true, message: "请再次输入新密码", trigger: "blur" },
					{ min: 4, message: "长度大于 4 个字符", trigger: "blur" },
				],
			},
		};
	},
};
</script>

<style>
html,
body,
#alayout,
.el-container {
	padding: 0px;
	margin: 0px;
	height: 100%;
}

#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: left;
	color: #2c3e50;
	margin-top: 0px;
	height: 100%;
}

.tagViewWidth {
	width: 75vw - calc(v-bind(menuWidth) * 1px) !important;
}

@media screen and (max-width: 768px) {
	/* 在视口宽度小于等于768px时应用的样式 */
	.hide {
		display: none;
	}
}
</style>
